<!-- 书架二级导航 -->
<template>
  <div class="">
    <div class="sjejdh">
     <div class="sj1" style="color:red" ref="demoh1" @click="fun('Demoa')" >精选</div>
     <div class="sj2" ref="demoh2" @click="fun('Democ')">分类</div>
     <div class="sj3" ref="demoh3" @click="fun('Demob')">榜单</div>
     <div class="sj4" ref="demoh4" @click="fun('Demod')">书单</div>
    </div>
      <keep-alive >
        <component :is="com" ></component>
      </keep-alive>
  </div>
</template>

<script>

import Demoa from "bczj/sczj/jx/jx.vue"
import Demob from "bczj/sczj/bd/bd.vue"
import Democ from "bczj/sczj/fl/fl.vue"
import Demod from "bczj/sczj/sd/sd.vue"

export default {
  components: {
    Demoa,Demob,Democ,Demod
  },
  data() {
    return {
       com:"Demoa",
       isactive:false,
    };
  },
  computed: {},
  watch: {},
  methods: {
     funb(){
         this.$refs.demoh1.style.color="";
         this.$refs.demoh2.style.color="";
         this.$refs.demoh3.style.color="";
         this.$refs.demoh4.style.color="";
     },
     fun(text){
        switch (text) {
          case "Demoa":
              this.com=text;
              this.funb();
              this.$refs.demoh1.style.color="red";
            break;
          case "Demob":
              this.com=text;
               this.funb();
              this.$refs.demoh3.style.color="red";
            break;
          case "Democ":
              this.com=text;
               this.funb();
              this.$refs.demoh2.style.color="red";
            break;
          case "Demod":
              this.com=text;
              this.funb();
              this.$refs.demoh4.style.color="red";
            break;
        }
    },
  },
  created() {},
  mounted() {},
};
</script>
<style scoped>
.sjejdh {
  height: 0.65rem;
  display: flex;
  position: fixed;
  width: 100%;
  top:1.19rem ;
  z-index: 11;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
}
.active {
  color: red;
}
</style>